<template>
<header class="page-header">
  <div class="header-main">
    <van-icon name="arrow-left" @click="goBack" />
    <div class="name">
      <div class="van-ellipsis">{{ name }}</div>
    </div>
  </div>
</header>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: '',
    },
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="less">
.page-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  .px2rem(height, 100);
  background: #fff;
  z-index: 99;

  .header-main {
    position: relative;
    width: 100%;
    height: 100%;

    .van-icon {
      position: absolute;
      left: 0;
      top: 0;
      .px2rem(height, 100);
      color: #666;
      .px2rem(font-size, 40);
      .px2rem(line-height, 100);
      .px2rem(padding-left, 30);
    }

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: #ddd;
      transform: scaleY(.5);
      transform-origin: left top;
    }
  }

  .name {
    // width: 100%;
    .px2rem(height, 100);
    padding-left: 1.05rem;
    padding-right: 1.05rem;
    color: #333;
    .px2rem(font-size, 34);
    .px2rem(line-height, 100);
    text-align: center;
  }
}
</style>
